<template>
  <div class="echarts">
    <div
      id="echartzylb"
      style="width: 330px; height: 450px"
    ></div>
  </div>
</template>
 
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
  data() {
    return {
      currentObj: [],
      arr: 0,
    };
  },
  props: {
    // echartObj: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  created() {
    // this.$nextTick(() => {
    //   this.loadEchart();
    // });
  },
  mounted() {
    // let _this = this;
    // window.onresize = function () {
    //   _this.myChart.resize();
    // };
  },
  methods: {
    loadEchart(res) {
      console.log(res)
      this.currentObj = res;
      var Data = [];
      var Data1 = [];
      var Data2 = [];
      let arr = 0;
      
      this.currentObj
        .forEach((item) => {
          Data.push(item.zylb);
          Data1.push(item.sl);
          Data2.push(item.num);
          arr += item.sl;
        });
      this.myChart = echarts.init(document.getElementById("echartzylb"));
      this.myChart.setOption({
        title: {
          left: "center",
          text: "专业类别",
          // subtext: "数据来自超高压",
          textStyle: {
            color: "white", //字体颜色
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // legend: {
        //   left:50,
        //   //data: data,
        //   textStyle: {
        //     fontSize: 13, //字体大小
        //     color: "white", //字体颜色
        //   },
        // },
        grid: {
          top: 40,
          left: "left",
          right: "10%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            textStyle: {
              color: "white",
            },
          },
           //设置轴线的属性
          axisLine:{
              lineStyle:{
                  color:'white',
                  width:2,//这里是为了突出显示加上的
              }
          } 
        },
        yAxis: {
          type: "category",
          data: Data,
          axisLabel: {
            show: true,
            textStyle: {
              color: "white",
              fontSize: 12,
            },
          },
           //设置轴线的属性
          axisLine:{
              lineStyle:{
                  color:'white',
                  width:2,//这里是为了突出显示加上的
              }
          } 
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: Data1,
            // itemStyle: {
            //   normal: {
            //     label: {
            //       show: true, //开启显示
            //       position: "top", //显示方向
            //       textStyle: {
            //         //数值样式
            //         color: "#027aff",
            //         fontSize: 16
            //       },
            //       formatter: function(v) {
            //           var val = v.data;
            //           return val + '\n'+ val +'%';
            //       },
            //     },
            //     color: "#4ad2ff"
            //   },
            // },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorlist = ["#DA251D", "#E67716", "#FBC300", "#0c7ef2","#DA251D", "#E67716", "#FBC300", "#0c7ef2", "#E67716"];
                  return colorlist[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                show: true, //开启显示
                  position: "right", //显示方向
                  textStyle: {
                    fontWeight: 300,
                    color:"white",
                    fontSize: 14, //文字的字体大小
                },
                formatter: function (v) {
                  //console.log(v)
                  var val = v.data;
                  //return val + '\n'+ val/arr * 100 +'%';
                  return (
                    val + "\n" + (Math.round((val / arr) * 10000) / 100.0 + "%") // 小数点后两位百分比
                  );
                },
                color: function (params) {
                  var colorlist = ["#DA251D", "#E67716", "#FBC300", "#0c7ef2"];
                  return colorlist[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>
 
<style lang='less' scoped>
</style>